<template>
	<view class="wrap" :style="colorStyle">
		<u-popup :show="show" @close="close" @open="open">
			<view class="user_box">
				<view class="title flex_s">
					<view class="logo_box">
						<image src="@/static/logo.png" mode="aspectFill"></image>
					</view>
					<text>金小度换购 申请</text>
				</view>
				<view class="sub_title">
					获取您额昵称、头像
				</view>
				<view class="form_box">
					<view class="form_item flex_s">
						<view class="left">
							头像
						</view>
						<view class="right">
							<button id="buttona" class="permits" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<view class="avatar_box">
									<image class="avatar" :src="userinfo.headimg" v-if="userinfo.headimg"></image>
									<image class="avatar" src="@/static/imgs/defaultAvatar.png" v-else></image>
								</view>
								
							</button>
						</view>
					</view>
					<view class="form_item flex_s">
						<view class="left">
							昵称
						</view>
						<view class="right">
							<input type="nickname"  class="form_input" placeholder="点击授权昵称" @change="getNickname"
								v-model="userinfo.nickname" name="nickname" />
						</view>
					</view>
				</view>
				<view class="btn_box">
					<view class="btn allow" @click="confirm">
						允许
					</view>
					<view class="btn no_allow" @click="close">
						拒绝
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import colors from "@/mixins/color.js"
	import {
		HTTP_REQUEST_URL
	} from '../config/app.js';
	export default {
		mixins: [colors],
		name: "eidtUserModal",
		data() {
			return {
				show: false,
				userinfo:{
					headimg:'',
					nickname:''
				}
			};
		},
		methods: {
			open() {
				this.show=true
			},
			close() {
				this.show = false
			},
			getNickname(e){
				this.userinfo.nickname=e.detail.value
			},
			onChooseAvatar(e) { // 获取授权头像
				uni.showLoading({
					title: "上传中"
				})
				
				
				
			},
			confirm(){
				this.close()
				this.$emit('confirm',this.userinfo)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		.user_box{
			color: #1C1C1C;
			width: 750rpx;
			height: 781rpx;
			padding: 48rpx;
			.title{
				
				font-size: 30rpx;
				font-weight: 700;
				margin-bottom: 45rpx;
				.logo_box{
					width: 58rpx;
					height: 58rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 10rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.sub_title{
				font-size: 36rpx;
				margin-bottom: 60rpx;
			}
			.form_box{
				margin-bottom: 126rpx;
				.form_item{
					height: 117rpx;
					border-bottom: 2rpx solid #E5E5E5;
					.left{
						margin-right: 40rpx;
						font-size: 30rpx;
					}
					.right{
						.avatar_box{
							width: 83rpx;
							height: 83rpx;
							border-radius: 50%;
							overflow: hidden;
							background: #CCCCCC;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			.btn_box{
				.btn{
					width: 663rpx;
					height: 86rpx;
					line-height: 86rpx;
					text-align: center;
					margin: 0 auto;
					border-radius: 20rpx;
					overflow: hidden;
					font-size: 30rpx;
					font-weight: 700;
					
				}
				.allow{
					color: var(--view-theme);
					background: #E8F2FE;
				}
				.no_allow{
					color: #606E92;
					
				}
			}
		}
	}
</style>